<template>
  <div>
    <el-card shadow="always">
      <el-form :inline="true" :model="requestData" size="mini" label-width="80px">
        <el-form-item label="连接名">
          <el-input v-model="requestData.keyword" placeholder="输入连接名检索"></el-input>
        </el-form-item>
        <el-form-item label="连接类型">
          <el-select v-model="requestData.type">
            <el-option label="折线图" value="shanghai"></el-option>
            <el-option label="条形图" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">搜索</el-button>
          <el-button @click="requestData.keyword = ''">重置</el-button>
          <el-button type="success" @click="add">新建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="always">
      <table-view :table-data="tableData" :pageData="requestData" @handleCurrentChange='handleCurrentChange'
                  v-loading="loading">
        <template #operation="data">
          <el-button v-show="isChoose" size="mini" type="success" @click="choose(data.data)">选择</el-button>
          <el-button v-show="!isChoose" size="mini" type="primary" @click="edit(data.data)">编辑</el-button>
          <el-button v-show="!isChoose" size="mini" type="danger" @click="del(data.data)">删除</el-button>
        </template>
      </table-view>
    </el-card>

    <!--    数据连接编辑弹窗  -->
    <el-dialog v-model="dialog.editRepositorySourceDialogVisible" title="编辑连接">
      <el-form ref="form" :model="currentData" label-width="120px" size="mini">
        <el-form-item label="连接类型">
          <el-select v-model="currentData.dataProviderType" placeholder="请选择连接类型">
            <el-option label="SQL SERVER" :value="1"><img :src="require('/src/assets/images/sqlserver.jpg')" style="height: 34px"></el-option>
            <el-option label="MYSQL8" :value="2"><img :src="require('/src/assets/images/mysql.jpg')" style="height: 34px"></el-option>
            <el-option label="ORACLE" :value="3"><img :src="require('/src/assets/images/oracle.jpg')" style="height: 34px"> </el-option>
            <el-option label="PostgreSQL" :value="4"><img :src="require('/src/assets/images/PostgreSQL.jpg')" style="height: 34px"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="连接名称">
          <el-input v-model="currentData.name"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称">
          <el-input v-model="currentData.repositoryName"></el-input>
        </el-form-item>
        <el-form-item label="驱动">
          <el-input v-model="currentData.driverClassName" placeholder="选择驱动"></el-input>
        </el-form-item>
        <el-form-item label="连接字符串">
          <el-input v-model="currentData.url" placeholder="输入连接字符串"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="currentData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="currentData.password"></el-input>
        </el-form-item>

        <el-form-item size="large">
          <el-icon v-show="status =='success'" class="el-icon--left el-icon-success" style="color: #67C23A"></el-icon>
          <el-icon v-show="status =='danger'" class="el-icon--left el-icon-error" style="color: #F56C6C"></el-icon>
          <el-button size="mini" type="warning" @click="validConnection(currentData)" v-loading="loadingButton">
            {{ buttonText }}
          </el-button>
          <el-button size="mini" type="primary" @click="save(currentData)">保存</el-button>
          <el-button size="mini" @click="dialog.editRepositorySourceDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getList, del, validConnection, save} from '@/api/repositorySource'
import tableView from '@/components/tableview'
import {store} from "@/layout/common/store";

export default {
  name: "index",
  props: {
    isChoose: Boolean
  },
  components: {
    tableView
  },
  data() {
    return {
      dialog: store,
      requestData: {
        keyword: '',
        type: '',
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      loading: false,
      tableData: {
        tableList: [],
        tableHeader: [{
          prop: 'id',
          label: '编号',
          width: "180"
        }, {
          prop: 'name',
          label: '名称',
          width: "180"
        }, {
          prop: 'repositoryConfig.providerName',
          label: '类型',
          width: "140"
        }, {
          prop: 'lastUpdateTime',
          label: '修改时间',
          width: "180"
        },
          {
            label: "操作",
            width: 150,
            type: "slot",
            slotName: 'operation'
          }]
      },
      currentData: {},
      dialogVisible: false,
      status: 'warning',
      loadingButton: false,
      buttonText: "测试连接"
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      getList(this.requestData).then(resp => {
        this.tableData.tableList = resp.data.records
        this.requestData.total = Number(resp.data.total)
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    handleCurrentChange(index) {
      this.requestData.pageNum = index
      this.fetchData()
    },
    del(obj) {
      this.$confirm('确认删除此连接?', '正在使用此连接将会收到影响', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(obj.id).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        )
      })
    },
    edit(obj) {
      this.dialog.editRepositorySourceDialogVisible = true
      this.currentData = JSON.parse(JSON.stringify(obj))
    },
    save(obj) {
      save(obj).then(resp => {
        this.$message.success("保存成功！")
        this.dialog.editRepositorySourceDialogVisible = false
        this.fetchData()
      })
    },
    add() {
      this.currentData = {}
      this.dialog.editRepositorySourceDialogVisible = true
    },
    validConnection(obj) {
      this.loadingButton = true
      this.status = 'warning'
      this.buttonText = '正在连接'
      validConnection(obj).then(() => {
          this.status = 'success'
          this.buttonText = '连接成功'
          this.loadingButton = false
        }
      ).catch(err => {
        this.status = 'danger'
        this.buttonText = '连接失败'
        this.loadingButton = false
      })
    },
    choose(obj) {
      this.$store.dispatch("repositorySource/setData", {obj: obj})
      this.$store.dispatch("dataSource/clearDataSource")
      this.$store.dispatch("dataSource/setDataSource", {
        repositoryId: obj.id,
        dataProviderType: obj.dataProviderType
      })
      this.dialog.repositorySourceDialogVisible = false
      this.dialog.editDataSourceDialogVisible = true
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    'dialog.repositorySourceDialogVisible'() {
      this.status = 'warning'
      this.buttonText = '测试连接'
    }
  }
}
</script>

<style scoped>

</style>
